<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 当前活动的菜单项
const activeMenu = ref('profile');

// 用户信息表单
const userForm = ref({
  username: '',
  phone: '',
  email: '',
  gender: 'female',
  birthday: ''
});

// 最近订单数据
const recentOrders = ref([
  {
    id: '20230615001',
    status: '待发货',
    statusColor: 'text-rose-500',
    date: '2023-06-15 14:30',
    amount: 199.00,
    product: {
      name: '浪漫红玫瑰花束',
      spec: '11朵',
      package: '牛皮纸',
      image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
    }
  },
  {
    id: '20230610002',
    status: '已完成',
    statusColor: 'text-green-500',
    date: '2023-06-10 09:15',
    amount: 279.00,
    product: {
      name: '阳光向日葵花束',
      spec: '标准',
      package: '礼盒',
      image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
    }
  },
  {
    id: '20230605003',
    status: '已完成',
    statusColor: 'text-green-500',
    date: '2023-06-05 16:45',
    amount: 289.00,
    product: {
      name: '彩色郁金香花束',
      spec: '标准',
      package: '牛皮纸',
      image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
    }
  }
]);

// 组件挂载时初始化
onMounted(() => {
  userStore.initializeAuth();
  
  // 如果未登录，跳转到登录页
  if (!userStore.checkIsLoggedIn) {
    router.push('/login');
    return;
  }
  
  // 初始化用户表单数据
  if (userStore.user) {
    userForm.value = {
      username: userStore.user.username || '',
      phone: userStore.user.phone || '',
      email: userStore.user.email || '',
      gender: 'female',
      birthday: '1990-01-01'
    };
  }
});

// 设置活动菜单
const setActiveMenu = (menu: string) => {
  activeMenu.value = menu;
};

// 保存用户信息
const saveUserInfo = () => {
  if (userStore.user) {
    userStore.updateUserInfo({
      username: userForm.value.username,
      phone: userForm.value.phone,
      email: userForm.value.email
    });
    alert('保存成功！');
  }
};

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};

// 查看订单详情
const viewOrderDetail = (orderId: string) => {
  router.push(`/order-detail/${orderId}`);
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>
          <div class="hidden md:flex items-center space-x-2">
            <img 
              :src="userStore.getUserAvatar" 
              :alt="userStore.getDisplayName"
              class="w-8 h-8 rounded-full object-cover"
            >
            <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
          </div>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <div class="md:flex md:gap-6">
        <!-- 左侧导航 -->
        <div class="md:w-1/4 lg:w-1/5 mb-6 md:mb-0">
          <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 用户信息 -->
            <div class="p-4 text-center border-b border-gray-100">
              <img 
                :src="userStore.getUserAvatar" 
                :alt="userStore.getDisplayName"
                class="w-20 h-20 rounded-full mx-auto mb-3 object-cover"
              >
              <h2 class="font-bold text-lg text-gray-800">{{ userStore.getDisplayName }}</h2>
              <p class="text-gray-500 text-sm">普通会员</p>
            </div>

            <!-- 导航菜单 -->
            <nav class="p-2">
              <a 
                @click.prevent="setActiveMenu('profile')"
                href="#" 
                :class="[
                  'flex items-center p-3 rounded-lg mb-1',
                  activeMenu === 'profile' 
                    ? 'bg-rose-50 text-rose-500' 
                    : 'text-gray-700 hover:bg-gray-50'
                ]"
              >
                <font-awesome-icon icon="user-circle" class="w-5 text-center mr-2" />
                <span>个人信息</span>
              </a>
              <a 
                @click.prevent="setActiveMenu('orders')"
                href="#" 
                :class="[
                  'flex items-center p-3 rounded-lg mb-1',
                  activeMenu === 'orders' 
                    ? 'bg-rose-50 text-rose-500' 
                    : 'text-gray-700 hover:bg-gray-50'
                ]"
              >
                <font-awesome-icon icon="clipboard-list" class="w-5 text-center mr-2" />
                <span>我的订单</span>
              </a>
              <a
                @click.prevent="router.push('/address')"
                href="#"
                class="flex items-center p-3 rounded-lg mb-1 text-gray-700 hover:bg-gray-50"
              >
                <font-awesome-icon icon="map-marker-alt" class="w-5 text-center mr-2" />
                <span>收货地址</span>
              </a>
              <a
                @click.prevent="router.push('/favorites')"
                href="#"
                class="flex items-center p-3 rounded-lg mb-1 text-gray-700 hover:bg-gray-50"
              >
                <font-awesome-icon :icon="['far', 'heart']" class="w-5 text-center mr-2" />
                <span>我的收藏</span>
              </a>
              <a
                @click.prevent="router.push('/review')"
                href="#"
                class="flex items-center p-3 rounded-lg mb-1 text-gray-700 hover:bg-gray-50"
              >
                <font-awesome-icon icon="comment-alt" class="w-5 text-center mr-2" />
                <span>我的评价</span>
              </a>
              <a 
                @click.prevent="setActiveMenu('settings')"
                href="#" 
                :class="[
                  'flex items-center p-3 rounded-lg mb-1',
                  activeMenu === 'settings' 
                    ? 'bg-rose-50 text-rose-500' 
                    : 'text-gray-700 hover:bg-gray-50'
                ]"
              >
                <font-awesome-icon icon="cog" class="w-5 text-center mr-2" />
                <span>账号设置</span>
              </a>
              <a 
                @click.prevent="handleLogout"
                href="#" 
                class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50 border-t border-gray-100 mt-2"
              >
                <font-awesome-icon icon="sign-out-alt" class="w-5 text-center mr-2" />
                <span>退出登录</span>
              </a>
            </nav>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="md:w-3/4 lg:w-4/5">
          <!-- 个人信息 -->
          <div v-if="activeMenu === 'profile'" class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold mb-4 pb-2 border-b border-gray-100 text-gray-800">个人信息</h2>
            
            <div class="space-y-6">
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">头像</div>
                <div class="md:w-3/4 mt-2 md:mt-0 flex items-center">
                  <img 
                    :src="userStore.getUserAvatar" 
                    :alt="userStore.getDisplayName"
                    class="w-16 h-16 rounded-full object-cover"
                  >
                  <button class="ml-4 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 text-sm text-gray-700">
                    更换头像
                  </button>
                </div>
              </div>
              
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">用户名</div>
                <div class="md:w-3/4 mt-2 md:mt-0">
                  <input 
                    v-model="userForm.username"
                    type="text" 
                    class="w-full md:w-1/2 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent text-gray-800"
                  >
                </div>
              </div>
              
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">手机号码</div>
                <div class="md:w-3/4 mt-2 md:mt-0">
                  <input 
                    v-model="userForm.phone"
                    type="text" 
                    class="w-full md:w-1/2 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent text-gray-800"
                  >
                  <p class="mt-1 text-sm text-gray-500">已绑定手机号码，可用于登录和找回密码</p>
                </div>
              </div>
              
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">邮箱</div>
                <div class="md:w-3/4 mt-2 md:mt-0">
                  <input 
                    v-model="userForm.email"
                    type="email" 
                    class="w-full md:w-1/2 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent text-gray-800"
                  >
                  <p class="mt-1 text-sm text-gray-500">可用于登录和接收通知</p>
                </div>
              </div>
              
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">性别</div>
                <div class="md:w-3/4 mt-2 md:mt-0 space-x-4">
                  <label class="inline-flex items-center">
                    <input 
                      v-model="userForm.gender"
                      type="radio" 
                      value="female"
                      class="form-radio h-4 w-4 text-rose-500"
                    >
                    <span class="ml-2 text-gray-700">女</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input 
                      v-model="userForm.gender"
                      type="radio" 
                      value="male"
                      class="form-radio h-4 w-4 text-rose-500"
                    >
                    <span class="ml-2 text-gray-700">男</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input 
                      v-model="userForm.gender"
                      type="radio" 
                      value="secret"
                      class="form-radio h-4 w-4 text-rose-500"
                    >
                    <span class="ml-2 text-gray-700">保密</span>
                  </label>
                </div>
              </div>
              
              <div class="md:flex md:items-center">
                <div class="md:w-1/4 font-medium text-gray-700">生日</div>
                <div class="md:w-3/4 mt-2 md:mt-0">
                  <input 
                    v-model="userForm.birthday"
                    type="date" 
                    class="w-full md:w-1/2 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent text-gray-800"
                  >
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-100">
                <button 
                  @click="saveUserInfo"
                  class="px-6 py-2 bg-rose-500 text-white rounded-md hover:bg-rose-600 transition duration-300"
                >
                  保存修改
                </button>
              </div>
            </div>
          </div>

          <!-- 最近订单 -->
          <div v-if="activeMenu === 'profile'" class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-4 pb-2 border-b border-gray-100">
              <h2 class="text-lg font-bold text-gray-800">最近订单</h2>
              <a @click.prevent="setActiveMenu('orders')" href="#" class="text-rose-500 hover:text-rose-600 text-sm">查看全部</a>
            </div>
            
            <div class="space-y-4">
              <!-- 订单项 -->
              <div 
                v-for="order in recentOrders" 
                :key="order.id"
                class="border border-gray-200 rounded-lg p-4"
              >
                <div class="flex justify-between items-center mb-3">
                  <span class="text-gray-500">订单号：{{ order.id }}</span>
                  <span :class="order.statusColor">{{ order.status }}</span>
                </div>
                <div class="flex mb-3">
                  <div class="w-16 h-16 flex-shrink-0 rounded overflow-hidden mr-3">
                    <img 
                      :src="order.product.image" 
                      :alt="order.product.name" 
                      class="w-full h-full object-cover"
                    >
                  </div>
                  <div>
                    <h3 class="font-medium text-gray-800">{{ order.product.name }}</h3>
                    <p class="text-sm text-gray-500 mt-1">规格：{{ order.product.spec }} | 包装：{{ order.product.package }}</p>
                  </div>
                </div>
                <div class="flex justify-between items-center text-sm">
                  <span class="text-gray-500">{{ order.date }}</span>
                  <div>
                    <span class="mr-4 text-gray-800">¥{{ order.amount.toFixed(2) }}</span>
                    <button 
                      @click="viewOrderDetail(order.id)"
                      class="px-3 py-1 border border-rose-500 text-rose-500 rounded hover:bg-rose-50"
                    >
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 其他菜单内容占位 -->
          <div v-if="activeMenu !== 'profile'" class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">{{ 
              activeMenu === 'orders' ? '我的订单' :
              activeMenu === 'address' ? '收货地址' :
              activeMenu === 'favorites' ? '我的收藏' :
              activeMenu === 'reviews' ? '我的评价' :
              activeMenu === 'settings' ? '账号设置' : '内容'
            }}</h2>
            <p class="text-gray-500">此功能正在开发中...</p>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-rose-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
